<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>达人说</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        *{margin:0;padding:0;}
        #header {
            background: #fff;
        }

        #header .aui-bar {
            background: transparent;
            color: #000;
            border-bottom: 1px solid #E8E8E8;
        }

        #header .aui-bar .aui-btn .aui-icon-left {
            color: #000;
        }
        .top_products{
          height: 200px;
        }
        .new_products{
          height: 120px;
        }
        .top_products ul,.top_products li , .new_products ul,.new_products li{
          list-style: none;
        }
        .top_products ul , .new_products ul{
          overflow: hidden;
          overflow-x: auto;
          white-space: nowrap;
        }
        .top_products ul {
          padding: 5% 10%;
        }
        .top_products li{
          height: 165px;
          width: 80%;
          margin: 0 2.5%;
          display: inline-block;
          border-radius: 10px;
          overflow: hidden;
          background: #fff;
          position: relative;
        }
        .top_products li:nth-child(1){
          margin-left: 10%;
        }
        .top_products li:nth-last-child(1){
          margin-right: 0;
        }
        .top_products .li_top_img {
          width: 100%;
        }
        .top_products .li_title {
          margin-left: 5px;
          font-size: 14px;
          line-height: 50px;
        }
        .top_products .li_items {
          color: #f19997;
          border-radius: 10px;
          overflow: hidden;
          width: 60px;
          height: 100px;
          border-radius: 10px;
          background: rgba(255,255,255,.8);
          display: flex;
          flex-direction: row-reverse;
          align-items: center;
          flex-wrap: wrap;
          position: absolute;
          bottom:20px;
          right:20px;
        }
        .top_products .li_items div {
          width: 100%;
          text-align: center;
        }
        .top_products .li_items div:nth-child(1){
          border-bottom: 1px solid #fff;
        }
        .new_products li{
          height:120px;
          width: 150px;
          background: #E8E8E8;
          padding: 5px;
          margin-right: 5px;
          border-radius: 10px;
          display: inline-block;
        }
        .new_products .li_top_img {
          width: 100%;
          height: 45px;
        }
        .new_products .li_title {
          font-size: 14px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:1;
        }
        .new_products .li_user {
          overflow: hidden;
        }
        .new_products .li_user .li_user_img {
          float: left;
          margin-top: 5px;
          width: 20%;
          border-radius: 50%;
        }
        .new_products .li_user .li_user_name {
          width: 75%;
          font-size: 12px;
          line-height: 30px;
          float: right;
          margin-top: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:1;
        }
        #prophet{
          overflow-y: scroll;
        }
        #main span {
          margin-right: 8px;
        }
        .title{
          height: 40px;
          font-size: 20px;
          line-height: 40px;
        }
        .option_bar{
          width: 100%;
          height: 40px;
          line-height: 40px;
        }
        .option_data_item{
          width: 100%;
          height: 216px;
          padding: 10px;
          background: #E8E8E8;
          border-radius: 10px;
          position: relative;
          margin-bottom: 10px;
        }
        .option_data_item img {
          width: 100%;
          height: 120px;
          border-radius: 5px;
        }
        .suspension{
          position: absolute;
          text-align: center;
          height: 28px;
          font-size: 16px;
          line-height: 28px;
          width: 90px;
          background: #f19997;
          border-radius: 5px;
          color: #fff;
          left: 25px;
          top: 115px;
        }
        .option_data_title{
          margin-top: 15px;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:1;
          padding-left: 15px;
        }
        .option_data_text{
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;
          padding-left: 15px;
        }
        .display_true{
          display: none;
        }
        .flex {
          z-index: 99;
          position: fixed;
          top: 0;
          background: #fff;
        }
        .doo{
          height: 1700px;
          width: 300px;
          background: red;
        }
        .choice{
          color: red;
        }

    </style>
</head>

<body>
  <div id="prophet">
    <div class="top_products">
      <ul id='top_products'>

      </ul>
    </div>
    <div style='padding:0 10px;'>
      <div class="title">本周新作</div>
      <div class="new_products">
        <ul id='new_products'>

        </ul>
      </div>
      <div class="title">大家都在逛</div>
      <div class="option_bar display_true" id="seat"></div>
      <div class="option_bar" id="main"></div>
      <div class="option_bar_data" id="option_bar_data">

      </div>
    </div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var topData_render,newData_render,main_render,talent_Category_render;
  var topData,newData,talent,listDataAll,listData=[];
  var choiceIndex=0;
    apiready = function() {
      $api.css($api.dom('#prophet'),'height:'+(window.innerHeight+40)+'px');
      var onOff = true,standard=$api.byId('main').offsetTop
      var timer,scrollIndex=0,signWidth;

      $api.addEvt($api.dom('#top_products'), 'scroll', function(e){
        clearTimeout(timer);
        timer = setTimeout(function () {
          var firstScrollDom
          try {
            firstScrollDom = $api.domAll('#top_products li')[scrollIndex-1].offsetLeft
          } catch (error) {
            firstScrollDom = $api.domAll('#top_products li')[0].offsetLeft
          }

          if( $api.dom('#top_products').scrollLeft > ($api.domAll('#top_products li')[scrollIndex].offsetLeft + signWidth) ){
            scrollIndex++
            $api.dom('#top_products').scrollLeft = $api.domAll('#top_products li')[scrollIndex].offsetLeft - $api.domAll('#top_products li')[0].offsetLeft
          }else if( $api.dom('#top_products').scrollLeft < (firstScrollDom + signWidth) ){

            scrollIndex--
            if( scrollIndex <= 0 ){
              $api.dom('#top_products').scrollLeft = 0
              scrollIndex = 0
            }else{
              $api.dom('#top_products').scrollLeft = $api.domAll('#top_products li')[scrollIndex].offsetLeft - $api.domAll('#top_products li')[0].offsetLeft
            }

          }else{
            if( scrollIndex <= 0 ){
              $api.dom('#top_products').scrollLeft = 0
              scrollIndex = 0
            }else{
              $api.dom('#top_products').scrollLeft = $api.domAll('#top_products li')[scrollIndex].offsetLeft - $api.domAll('#top_products li')[0].offsetLeft
            }
          }
        }, 100)
      });
      $api.addEvt($api.dom('#prophet'), 'scroll', function(e){
          if($api.dom('#prophet').scrollTop > standard){
            if(onOff){
              $api.addCls($api.dom('#main'), 'flex');
              $api.removeCls($api.dom('#seat'), 'display_true');
            }
            onOff = false
          }else{
            if(!onOff){
              $api.removeCls($api.dom('#main'), 'flex');
              $api.addCls($api.dom('#seat'), 'display_true');
            }
            onOff = true
          }

      });

      topData_render = doT.template($api.html($api.byId('topData_render')));
      newData_render = doT.template($api.html($api.byId('newData_render')));
      main_render = doT.template($api.html($api.byId('main_render')));
      talent_Category_render = doT.template($api.html($api.byId('talent_Category_render')));

      _Ajax(window.APIServerZGD.getProphetSay, 'get', {}, 'json', function (ret) {
        if (ret.code === 1) {
          topData = ret.data && ret.data.topdata
          newData = ret.data && ret.data.newdata
          talent = ret.data && ret.data.talent_Category
          listDataAll =ret.data && ret.data.clickdata
          listData.push({
            talentList:listDataAll,
            title:'全部',
            key:0
          })
          for (var key in talent) {
            if (talent.hasOwnProperty(key)) {
              var talentList = []
              for (var j = 0; j < listDataAll.length; j++) {
                if(key === listDataAll[j].talentcat){
                  listDataAll[j].talentcatName=talent[key]
                  talentList.push(listDataAll[j])
                }
              }
              listData.push({
                talentList:talentList,
                title:talent[key],
                key:key
              })
            }
          }
          console.log(JSON.stringify(topData))
          $api.append($api.byId('top_products'), topData_render(topData));
          $api.append($api.byId('new_products'), newData_render(newData));
          $api.append($api.byId('main'), main_render(listData));
          signWidth= $api.domAll('#top_products li')[0].clientWidth/2;
          openOptionBarData(0)
        } else {
          console.log(JSON.stringify(ret))
        }
      });
    };
    function openOptionBarData(key){
      $api.removeCls($api.domAll('#main span')[choiceIndex], 'choice');
      $api.addCls($api.domAll('#main span')[key], 'choice');
      choiceIndex=key
      $api.html($api.byId('option_bar_data'), talent_Category_render(listData[key].talentList));
    }
    function goToProphet(data){
      api.openWin({
        name: 'prophet_item_win',
        url: './prophet_item_win.html',
        rect: {
            x: 0,
            y: 0,
            w: 'auto',
            h: 'auto'
        },
        pageParam: {
            data: data
        }
      });
    }

</script>
<script id="topData_render" type="text/x-dot-template">
  {{ for (key in it){ }}
    <li onclick='goToProphet({{= it[key].id }})'>
      <img class="li_top_img" src="{{= it[key].article_banner+'_300x300.jpg' }}"/>
      <div class="li_title">{{= it[key].name}}</div>
      <div class="li_items">
        <div>{{= it[key].itemnum }}</div>
        <div>单品</div>
        <img class="li_top_img" src="{{= it[key].article_banner+'_200x200.jpg' }}"/>
      </div>
    </li>
  {{ } }}
  </script>
<script id="newData_render" type="text/x-dot-template">
  {{ for (key in it){ }}
    <li onclick='goToProphet({{= it[key].id }})'>
      <img class="li_top_img" src="{{= it[key].article_banner+'_300x300.jpg' }}"/>
      <span class="li_title">{{= it[key].name}}</span>
      <div class="li_user">
        <img class="li_user_img" src="{{= it[key].head_img+'_200x200.jpg' }}"/>
        <span class="li_user_name">{{= it[key].talent_name}}</span>
      </div>
    </li>
  {{ } }}
</script>
<script id="main_render" type="text/x-dot-template">
  {{ for (key in it){ }}
    <span onclick='openOptionBarData({{= key }})'>{{= it[key].title}}</span>
  {{ } }}
</script>
<script id="talent_Category_render" type="text/x-dot-template">
  {{ for (key in it){ }}
    <div class="option_data_item" onclick='goToProphet({{= it[key].id }})' >
      <img src="{{= it[key].article_banner+'_300x300.jpg' }}"/>
      <div class="suspension">{{= it[key].talentcatName}}/{{= it[key].itemnum}}单品</div>
      <p class="option_data_title">{{= it[key].name}}</p>
      <p class="option_data_text">{{= it[key].article}}</p>
    </div>
  {{ } }}
</script>
</html>
